<template>
  <div class="recovery">
    <el-container>
      <el-header>
        <div class="header-left">
          <h2>文件恢复</h2>
          <el-badge :value="recoveryStore.queueSummary.total" :hidden="!recoveryStore.hasQueuedTasks">
            <el-button type="primary" :disabled="!recoveryStore.hasQueuedTasks" @click="showBatchRecovery">
              批量恢复 ({{ recoveryStore.queueSummary.total }})
            </el-button>
          </el-badge>
        </div>
        <div class="header-right">
          <el-button-group>
            <el-button @click="showRecoveryHistory" :icon="Clock">历史记录</el-button>
            <el-button @click="clearAllResults" :icon="Delete">清空结果</el-button>
          </el-button-group>
        </div>
      </el-header>

      <el-main>
        <el-row :gutter="20">
          <!-- Left Panel: File Selection -->
          <el-col :span="8">
            <el-card class="selection-card">
              <template #header>
                <div class="card-header">
                  <span>文件选择</span>
                  <el-button type="text" @click="clearSelection" :disabled="!hasSelection">
                    清空选择
                  </el-button>
                </div>
              </template>
              
              <FileSelector @file-selected="onFileSelected" />
              
              <!-- Target Path Configuration -->
              <div class="target-path-section" v-if="selectedFile">
                <h4>目标路径设置</h4>
                <el-input
                  v-model="targetPath"
                  placeholder="输入目标文件路径"
                  :prefix-icon="Folder"
                >
                  <template #append>
                    <el-button @click="selectTargetPath" :icon="FolderOpened">选择</el-button>
                  </template>
                </el-input>
                
                <div class="path-suggestions" v-if="pathSuggestions.length">
                  <el-text size="small" type="info">建议路径:</el-text>
                  <div class="suggestions-list">
                    <el-tag
                      v-for="suggestion in pathSuggestions"
                      :key="suggestion"
                      @click="targetPath = suggestion"
                      class="suggestion-tag"
                      size="small"
                    >
                      {{ suggestion }}
                    </el-tag>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>

          <!-- Middle Panel: Recovery Options -->
          <el-col :span="8">
            <el-card class="options-card">
              <template #header>
                <span>恢复选项</span>
              </template>
              
              <el-form :model="recoveryOptions" label-width="120px" size="small">
                <el-form-item label="覆盖现有文件">
                  <el-switch v-model="recoveryOptions.overwrite" />
                </el-form-item>
                
                <el-form-item label="创建目录">
                  <el-switch v-model="recoveryOptions.createDirectories" />
                </el-form-item>
                
                <el-form-item label="保留时间戳">
                  <el-switch v-model="recoveryOptions.preserveTimestamp" />
                </el-form-item>
                
                <el-form-item label="最大并发数" v-if="recoveryStore.hasQueuedTasks">
                  <el-input-number
                    v-model="batchOptions.maxConcurrent"
                    :min="1"
                    :max="10"
                    size="small"
                  />
                </el-form-item>
                
                <el-form-item label="遇错继续" v-if="recoveryStore.hasQueuedTasks">
                  <el-switch v-model="batchOptions.continueOnError" />
                </el-form-item>
              </el-form>

              <!-- Action Buttons -->
              <div class="action-buttons">
                <el-button
                  type="primary"
                  @click="addToQueue"
                  :disabled="!canAddToQueue"
                  :icon="Plus"
                >
                  添加到队列
                </el-button>
                
                <el-button
                  type="success"
                  @click="recoverSingle"
                  :disabled="!canRecoverSingle"
                  :loading="recoveryStore.isRecovering"
                  :icon="Download"
                >
                  立即恢复
                </el-button>
                
                <el-button
                  @click="previewRecovery"
                  :disabled="!recoveryStore.hasQueuedTasks"
                  :icon="View"
                >
                  预览恢复
                </el-button>
              </div>
            </el-card>
          </el-col>

          <!-- Right Panel: Recovery Queue & Progress -->
          <el-col :span="8">
            <el-card class="queue-card">
              <template #header>
                <div class="card-header">
                  <span>恢复队列 ({{ recoveryStore.queueSummary.total }})</span>
                  <el-button type="text" @click="clearQueue" :disabled="!recoveryStore.hasQueuedTasks">
                    清空队列
                  </el-button>
                </div>
              </template>
              
              <!-- Progress Bar -->
              <div v-if="recoveryStore.isRecovering" class="progress-section">
                <RecoveryProgress
                  :percentage="recoveryStore.progress"
                  :current-file="recoveryStore.currentTask?.originalPath"
                  :completed="Math.floor(recoveryStore.progress / 100 * recoveryStore.totalTasks)"
                  :total="recoveryStore.totalTasks"
                  :success-count="recoveryStore.completedRecoveries.length"
                  :failed-count="recoveryStore.failedRecoveries.length"
                  :elapsed-time="elapsedTime"
                  @cancel="cancelRecovery"
                />
              </div>

              <!-- Queue List -->
              <div class="queue-list">
                <div
                  v-for="(task, index) in recoveryStore.recoveryQueue"
                  :key="`${task.versionId}-${task.fileId}`"
                  class="queue-item"
                >
                  <div class="task-info">
                    <div class="task-path">{{ task.originalPath }}</div>
                    <div class="task-target">→ {{ task.targetPath }}</div>
                  </div>
                  <el-button
                    type="text"
                    @click="removeFromQueue(index)"
                    :icon="Close"
                    size="small"
                    :disabled="recoveryStore.isRecovering"
                  />
                </div>
                
                <el-empty v-if="!recoveryStore.hasQueuedTasks" description="队列为空" />
              </div>
            </el-card>
          </el-col>
        </el-row>

        <!-- Results Section -->
        <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="24">
            <el-card class="results-card">
              <template #header>
                <div class="card-header">
                  <span>恢复结果</span>
                  <div class="result-stats">
                    <el-tag type="success" size="small" v-if="recoveryStore.hasCompletedTasks">
                      成功: {{ recoveryStore.completedRecoveries.length }}
                    </el-tag>
                    <el-tag type="danger" size="small" v-if="recoveryStore.hasFailedTasks">
                      失败: {{ recoveryStore.failedRecoveries.length }}
                    </el-tag>
                    <el-tag type="info" size="small" v-if="recoveryStore.successRate > 0">
                      成功率: {{ recoveryStore.successRate.toFixed(1) }}%
                    </el-tag>
                  </div>
                </div>
              </template>
              
              <el-tabs v-model="activeResultTab">
                <el-tab-pane label="成功" name="success">
                  <div class="result-list">
                    <div
                      v-for="(result, index) in recoveryStore.completedRecoveries"
                      :key="index"
                      class="result-item success"
                    >
                      <el-icon class="result-icon"><SuccessFilled /></el-icon>
                      <div class="result-info">
                        <div class="result-path">{{ result.targetPath }}</div>
                        <div class="result-details">
                          {{ formatFileSize(result.bytesWritten) }} 已写入
                        </div>
                      </div>
                      <el-button
                        type="text"
                        @click="removeCompletedResult(index)"
                        :icon="Close"
                        size="small"
                      />
                    </div>
                    <el-empty v-if="!recoveryStore.hasCompletedTasks" description="暂无成功记录" />
                  </div>
                </el-tab-pane>
                
                <el-tab-pane label="失败" name="failed">
                  <div class="result-list">
                    <div
                      v-for="(result, index) in recoveryStore.failedRecoveries"
                      :key="index"
                      class="result-item failed"
                    >
                      <el-icon class="result-icon"><CircleCloseFilled /></el-icon>
                      <div class="result-info">
                        <div class="result-path">{{ result.targetPath }}</div>
                        <div class="result-error">{{ result.error }}</div>
                      </div>
                      <div class="result-actions">
                        <el-button type="text" @click="retryFailedTask(result)" size="small">
                          重试
                        </el-button>
                        <el-button
                          type="text"
                          @click="removeFailedResult(index)"
                          :icon="Close"
                          size="small"
                        />
                      </div>
                    </div>
                    <el-empty v-if="!recoveryStore.hasFailedTasks" description="暂无失败记录" />
                  </div>
                </el-tab-pane>
              </el-tabs>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>

    <!-- Batch Recovery Dialog -->
    <el-dialog
      v-model="showBatchDialog"
      title="批量恢复"
      width="600px"
      :close-on-click-modal="false"
    >
      <div v-if="previewData">
        <div class="preview-summary">
          <el-descriptions :column="2" size="small">
            <el-descriptions-item label="文件数量">{{ previewData.tasks.length }}</el-descriptions-item>
            <el-descriptions-item label="预计大小">{{ formatFileSize(previewData.totalSize) }}</el-descriptions-item>
            <el-descriptions-item label="预计时间">{{ formatDuration(previewData.estimatedDuration) }}</el-descriptions-item>
            <el-descriptions-item label="冲突数量">{{ previewData.conflicts.length }}</el-descriptions-item>
          </el-descriptions>
        </div>

        <div v-if="previewData.conflicts.length" class="conflicts-section">
          <ConflictResolver
            :conflicts="previewData.conflicts"
            @resolutions-changed="onConflictResolutionsChanged"
          />
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showBatchDialog = false">取消</el-button>
          <el-button
            type="primary"
            @click="executeBatchRecovery"
            :loading="recoveryStore.isRecovering"
          >
            开始恢复
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- Recovery History Dialog -->
    <el-dialog
      v-model="showHistoryDialog"
      title="恢复历史"
      width="800px"
    >
      <div class="history-list">
        <div
          v-for="(batch, index) in recoveryStore.recentRecoveries"
          :key="index"
          class="history-item"
        >
          <div class="history-header">
            <div class="history-time">{{ formatDate(Date.now() - index * 60000) }}</div>
            <div class="history-stats">
              <el-tag type="success" size="small">成功: {{ batch.successful.length }}</el-tag>
              <el-tag type="danger" size="small">失败: {{ batch.failed.length }}</el-tag>
              <el-tag type="info" size="small">耗时: {{ formatDuration(batch.duration) }}</el-tag>
            </div>
          </div>
          <div class="history-details">
            总计 {{ batch.totalCount }} 个文件
          </div>
        </div>
        <el-empty v-if="!recoveryStore.recentRecoveries.length" description="暂无历史记录" />
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="clearRecoveryHistory">清空历史</el-button>
          <el-button type="primary" @click="showHistoryDialog = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- Target Path Selector Dialog -->
    <el-dialog
      v-model="showPathDialog"
      title="选择目标路径"
      width="500px"
    >
      <el-input
        v-model="tempTargetPath"
        placeholder="输入或选择目标路径"
        :prefix-icon="Folder"
      />
      <div class="path-browser" style="margin-top: 16px;">
        <!-- This would be a file system browser component -->
        <el-text type="info" size="small">文件系统浏览器将在后续实现</el-text>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showPathDialog = false">取消</el-button>
          <el-button type="primary" @click="confirmTargetPath">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { useRecoveryStore, useHistoryStore } from '../stores'
import FileSelector from '../components/FileSelector.vue'
import RecoveryProgress from '../components/RecoveryProgress.vue'
import ConflictResolver from '../components/ConflictResolver.vue'
import {
  Plus,
  Download,
  View,
  Close,
  Delete,
  Clock,
  Folder,
  FolderOpened,
  SuccessFilled,
  CircleCloseFilled,

} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { RecoveryTask, RecoveryOptions, BatchRecoveryOptions, RecoveryPreview } from '../types/basic'

// Stores
const recoveryStore = useRecoveryStore()
const historyStore = useHistoryStore()

// Component state
const selectedFile = ref<{ versionId: string, fileId: string, path: string } | null>(null)
const targetPath = ref('')
const tempTargetPath = ref('')
const activeResultTab = ref('success')
const showBatchDialog = ref(false)
const showHistoryDialog = ref(false)
const showPathDialog = ref(false)
const previewData = ref<RecoveryPreview | null>(null)
const conflictResolutions = ref<any[]>([])
const elapsedTime = ref(0)
const recoveryStartTime = ref(0)

// Recovery options
const recoveryOptions = ref<RecoveryOptions>({
  overwrite: false,
  createDirectories: true,
  preserveTimestamp: true
})

const batchOptions = ref<BatchRecoveryOptions>({
  ...recoveryOptions.value,
  continueOnError: true,
  maxConcurrent: 3
})

// Computed properties
const hasSelection = computed(() => selectedFile.value !== null)

const canAddToQueue = computed(() => 
  hasSelection.value && targetPath.value.trim() !== ''
)

const canRecoverSingle = computed(() => 
  canAddToQueue.value && !recoveryStore.isRecovering
)

const pathSuggestions = computed(() => {
  if (!selectedFile.value) return []
  
  const originalPath = selectedFile.value.path
  const fileName = originalPath.split('/').pop() || ''
  
  return [
    `src/${fileName}`,
    `src/components/${fileName}`,
    `src/views/${fileName}`,
    `src/utils/${fileName}`,
    originalPath
  ].filter(path => path !== targetPath.value)
})

// Methods
const onFileSelected = (selection: { versionId: string, fileId: string, path: string }) => {
  selectedFile.value = selection
  // Auto-suggest target path based on original path
  targetPath.value = selection.path
}

const clearSelection = () => {
  selectedFile.value = null
  targetPath.value = ''
}

const selectTargetPath = () => {
  tempTargetPath.value = targetPath.value
  showPathDialog.value = true
}

const confirmTargetPath = () => {
  targetPath.value = tempTargetPath.value
  showPathDialog.value = false
}

const addToQueue = () => {
  if (!selectedFile.value || !targetPath.value.trim()) return
  
  const task: RecoveryTask = {
    versionId: selectedFile.value.versionId,
    fileId: selectedFile.value.fileId,
    originalPath: selectedFile.value.path,
    targetPath: targetPath.value.trim()
  }
  
  recoveryStore.addToQueue(task)
  ElMessage.success('已添加到恢复队列')
  
  // Clear selection after adding
  clearSelection()
}

const recoverSingle = async () => {
  if (!selectedFile.value || !targetPath.value.trim()) return
  
  const task: RecoveryTask = {
    versionId: selectedFile.value.versionId,
    fileId: selectedFile.value.fileId,
    originalPath: selectedFile.value.path,
    targetPath: targetPath.value.trim()
  }
  
  try {
    const result = await recoveryStore.recoverSingle(task, recoveryOptions.value)
    
    if (result.success) {
      ElMessage.success(`文件恢复成功: ${result.targetPath}`)
      clearSelection()
    } else {
      ElMessage.error(`文件恢复失败: ${result.error}`)
    }
  } catch (error) {
    ElMessage.error('恢复操作失败')
    console.error('Recovery failed:', error)
  }
}

const previewRecovery = async () => {
  if (!recoveryStore.hasQueuedTasks) return
  
  try {
    previewData.value = await recoveryStore.previewRecovery() || null
    showBatchDialog.value = true
  } catch (error) {
    ElMessage.error('预览失败')
    console.error('Preview failed:', error)
  }
}

const showBatchRecovery = async () => {
  await previewRecovery()
}

const executeBatchRecovery = async () => {
  try {
    recoveryStartTime.value = Date.now()
    elapsedTime.value = 0
    
    // Start timer for elapsed time
    const timer = setInterval(updateElapsedTime, 1000)
    
    const result = await recoveryStore.recoverBatch(batchOptions.value)
    
    clearInterval(timer)
    
    if (result) {
      ElMessage.success(`批量恢复完成: 成功 ${result.successful.length} 个，失败 ${result.failed.length} 个`)
      showBatchDialog.value = false
      previewData.value = null
      conflictResolutions.value = []
    }
  } catch (error) {
    ElMessage.error('批量恢复失败')
    console.error('Batch recovery failed:', error)
  } finally {
    elapsedTime.value = 0
    recoveryStartTime.value = 0
  }
}

const removeFromQueue = (index: number) => {
  recoveryStore.removeFromQueue(index)
}

const clearQueue = async () => {
  if (recoveryStore.isRecovering) {
    ElMessage.warning('恢复进行中，无法清空队列')
    return
  }
  
  try {
    await ElMessageBox.confirm('确定要清空恢复队列吗？', '确认操作', {
      type: 'warning'
    })
    
    recoveryStore.clearQueue()
    ElMessage.success('队列已清空')
  } catch {
    // User cancelled
  }
}

const cancelRecovery = async () => {
  try {
    await ElMessageBox.confirm('确定要取消当前恢复操作吗？', '确认操作', {
      type: 'warning'
    })
    
    recoveryStore.cancelRecovery()
    ElMessage.info('恢复操作已取消')
  } catch {
    // User cancelled
  }
}

const removeCompletedResult = (index: number) => {
  recoveryStore.removeCompletedResult(index)
}

const removeFailedResult = (index: number) => {
  recoveryStore.removeFailedResult(index)
}

const retryFailedTask = (_result: any) => {
  // Create a new task from the failed result
  // Note: This is a simplified implementation
  // In a real scenario, we'd need to store more info in the result
  ElMessage.info('重试功能需要更多上下文信息')
}

const clearAllResults = async () => {
  try {
    await ElMessageBox.confirm('确定要清空所有恢复结果吗？', '确认操作', {
      type: 'warning'
    })
    
    recoveryStore.clearResults()
    ElMessage.success('结果已清空')
  } catch {
    // User cancelled
  }
}

const showRecoveryHistory = () => {
  showHistoryDialog.value = true
}

const clearRecoveryHistory = async () => {
  try {
    await ElMessageBox.confirm('确定要清空恢复历史吗？', '确认操作', {
      type: 'warning'
    })
    
    recoveryStore.clearHistory()
    ElMessage.success('历史记录已清空')
  } catch {
    // User cancelled
  }
}

// Utility functions
const formatFileSize = (bytes: number): string => {
  if (bytes === 0) return '0 B'
  
  const units = ['B', 'KB', 'MB', 'GB']
  let unitIndex = 0
  let size = bytes
  
  while (size >= 1024 && unitIndex < units.length - 1) {
    size /= 1024
    unitIndex++
  }
  
  return `${size.toFixed(1)} ${units[unitIndex]}`
}

const formatDuration = (ms: number): string => {
  if (ms < 1000) return `${ms}ms`
  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`
  return `${(ms / 60000).toFixed(1)}m`
}

const formatDate = (timestamp: number): string => {
  return new Date(timestamp).toLocaleString('zh-CN')
}

const onConflictResolutionsChanged = (resolutions: any[]) => {
  conflictResolutions.value = resolutions
}

const updateElapsedTime = () => {
  if (recoveryStore.isRecovering && recoveryStartTime.value > 0) {
    elapsedTime.value = Date.now() - recoveryStartTime.value
  }
}

// Watch for option changes
watch(recoveryOptions, (newOptions) => {
  recoveryStore.updateDefaultOptions(newOptions)
}, { deep: true })

watch(batchOptions, (newOptions) => {
  recoveryStore.updateBatchOptions(newOptions)
}, { deep: true })

// Initialize
onMounted(async () => {
  await historyStore.loadVersions()
})
</script>

<style scoped>
.recovery {
  height: 100vh;
}

.el-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--el-color-primary-light-3);
  padding: 0 20px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-left h2 {
  margin: 0;
  color: var(--el-text-color-primary);
}

.el-main {
  padding: 20px;
  background-color: var(--el-bg-color-page);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.selection-card,
.options-card,
.queue-card,
.results-card {
  height: fit-content;
}

.target-path-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--el-border-color-lighter);
}

.target-path-section h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: var(--el-text-color-primary);
}

.path-suggestions {
  margin-top: 8px;
}

.suggestions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.suggestion-tag {
  cursor: pointer;
  transition: all 0.2s;
}

.suggestion-tag:hover {
  background-color: var(--el-color-primary-light-7);
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.progress-section {
  margin-bottom: 16px;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.queue-list {
  max-height: 300px;
  overflow-y: auto;
}

.queue-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 4px;
  margin-bottom: 8px;
  background-color: var(--el-bg-color);
}

.task-info {
  flex: 1;
  min-width: 0;
}

.task-path {
  font-size: 13px;
  font-weight: 500;
  color: var(--el-text-color-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-target {
  font-size: 12px;
  color: var(--el-text-color-regular);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.result-stats {
  display: flex;
  gap: 8px;
}

.result-list {
  max-height: 300px;
  overflow-y: auto;
}

.result-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.result-item.success {
  background-color: var(--el-color-success-light-9);
  border: 1px solid var(--el-color-success-light-7);
}

.result-item.failed {
  background-color: var(--el-color-danger-light-9);
  border: 1px solid var(--el-color-danger-light-7);
}

.result-icon {
  margin-right: 12px;
  font-size: 16px;
}

.result-item.success .result-icon {
  color: var(--el-color-success);
}

.result-item.failed .result-icon {
  color: var(--el-color-danger);
}

.result-info {
  flex: 1;
  min-width: 0;
}

.result-path {
  font-size: 13px;
  font-weight: 500;
  color: var(--el-text-color-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.result-details {
  font-size: 12px;
  color: var(--el-text-color-regular);
}

.result-error {
  font-size: 12px;
  color: var(--el-color-danger);
}

.result-actions {
  display: flex;
  gap: 4px;
}

.preview-summary {
  margin-bottom: 16px;
}

.conflicts-section {
  margin-top: 16px;
}

.conflicts-section h4 {
  margin: 0 0 8px 0;
  color: var(--el-color-warning);
}

.conflict-list {
  max-height: 200px;
  overflow-y: auto;
}

.conflict-item {
  display: flex;
  align-items: center;
  padding: 8px;
  background-color: var(--el-color-warning-light-9);
  border: 1px solid var(--el-color-warning-light-7);
  border-radius: 4px;
  margin-bottom: 8px;
}

.conflict-icon {
  margin-right: 8px;
  color: var(--el-color-warning);
}

.conflict-info {
  flex: 1;
}

.conflict-path {
  font-size: 13px;
  font-weight: 500;
  color: var(--el-text-color-primary);
}

.conflict-details {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.history-list {
  max-height: 400px;
  overflow-y: auto;
}

.history-item {
  padding: 12px;
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 4px;
  margin-bottom: 8px;
  background-color: var(--el-bg-color);
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.history-time {
  font-size: 13px;
  font-weight: 500;
  color: var(--el-text-color-primary);
}

.history-stats {
  display: flex;
  gap: 4px;
}

.history-details {
  font-size: 12px;
  color: var(--el-text-color-regular);
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.path-browser {
  min-height: 200px;
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 4px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .el-col {
    margin-bottom: 16px;
  }
}

/* Scrollbar styling */
.queue-list::-webkit-scrollbar,
.result-list::-webkit-scrollbar,
.conflict-list::-webkit-scrollbar,
.history-list::-webkit-scrollbar {
  width: 6px;
}

.queue-list::-webkit-scrollbar-track,
.result-list::-webkit-scrollbar-track,
.conflict-list::-webkit-scrollbar-track,
.history-list::-webkit-scrollbar-track {
  background: var(--el-bg-color-page);
}

.queue-list::-webkit-scrollbar-thumb,
.result-list::-webkit-scrollbar-thumb,
.conflict-list::-webkit-scrollbar-thumb,
.history-list::-webkit-scrollbar-thumb {
  background: var(--el-border-color);
  border-radius: 3px;
}

.queue-list::-webkit-scrollbar-thumb:hover,
.result-list::-webkit-scrollbar-thumb:hover,
.conflict-list::-webkit-scrollbar-thumb:hover,
.history-list::-webkit-scrollbar-thumb:hover {
  background: var(--el-border-color-dark);
}
</style>